一个有三个网页的排版布局，效果非常不错
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="024" />
<title>纯绿色健康食品</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/banner.js"></script>
<script type="text/javascript" src="js/lihe.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="js/png.js"></script>
<script>DD_belatedPNG.fix('div,img,span,li,a,a:hover,dd,p,input,select')</script>
<![endif]-->
</head>
<body>
<div class="header">
<div class="h_mid_c">
<div class="h_mid">
<div class="logo">
<a href="#" >
<img src="images/logo.png" />
</a>
</div>
<div class="head_rtel"><span>订购热线</span><b> 86-0000-000000</b></div>
</div>
<div class="c"></div>
</div>
<!-- logo 搜索 end-->
<!-- 导航 -->
<div class="nav_c">
<div class="nav">
<ul>
<li><a href="index.html" >网站首页</a></li>
<li><a href="show.html" >公司简介</a></li>
<li><a href="product.html" >产品中心</a></li>
<li><a href="news.html" >加盟中心</a></li>
<li><a href="#" >店面展示</a></li>
<li><a href="#" >基地展示</a></li>
<li><a href="#" >人参养生</a></li>
<li><a href="#" >人参常识</a></li>
<li><a href="#" >资质荣誉</a></li>
<li><a href="#" >联系我们</a></li>
</ul>
</div>
</div>
<!-- 导航 end-->
</div>
<div class="banner">
<div class="banner-box">
<ul class="banner_pic">
<li><img src="images/banner1.jpg" /></li>
<li><img src="images/banner1.jpg" /></li>
</ul>
<div class="btns">
<div>
<a class="prev" href="#"></a>
<a class="next" href="#"></a>
</div>
</div>
<div class="num">
<ul></ul>
</div>
</div>
</div>
<!-- banner -->
<div class="noticefra">
<div class="notice">
<div class="noticecon">
<label class="index_sname">网站公告：</label>
<marquee>诚信为本，天天看得见的健康美食！</marquee>
</div>
<div class="search">
<form id="search" name="search" method="post" action="">
<input type="text" name="kws" id="kws" value="请输入关键词" class="text" onfocus="if(value!='') {value=''}" onblur="if (value=='') {value='请输入关键词'}" />
<input type="submit" class="button" value=""/>
</form>
</div>
</div>
</div>
<div class="indexpnav">
<div class="slider"> <span id="left" class="left end"></span><span class="right" id="right"></span> </div>
<div class="ipro" id="ipro2">
<div class="main">
<ul class="">
<li><a href="#" ><img src="images/p1.jpg" width="140" height="140" /></a><span>海鲜搭配</span></li>
<li><a href="#" ><img src="images/p2.jpg" width="140" height="140" /></a><span>排山肉海</span></li>
<li><a href="#" ><img src="images/p3.jpg" width="140" height="140" /></a><span>豆粮系类</span></li>
<li><a href="#" ><img src="images/p4.jpg" width="140" height="140" /></a><span>木瓜美食</span></li>
<li><a href="#" ><img src="images/p5.jpg" width="140" height="140" /></a><span>蛋白膳食</span></li>
<li><a href="#" ><img src="images/p1.jpg" width="140" height="140" /></a><span>海鲜搭配</span></li>
<li><a href="#" ><img src="images/p3.jpg" width="140" height="140" /></a><span>豆粮系类</span></li>
<li><a href="#" ><img src="images/p2.jpg" width="140" height="140" /></a><span>排山肉海</span></li>
<li><a href="#" ><img src="images/p5.jpg" width="140" height="140" /></a><span>蛋白膳食</span></li>
</ul>
</div>
</div>
</div>
<!--公司简介-->
<div class="index_ab">
<div class="clear"></div>
<p class="proname"><label>公司简介</label><a href="#" >更多</a></p>
<div class="clear"></div>
<div class="main">
<span class="index_abimg"><img src="images/p3.jpg" width="220" height="130" /></span>
<span class="index_abcon">
相比于油腻的荤腥，自然吃素菜安全的系数是要高一些的。菠菜是冬春季节里很讨喜的一种绿叶菜，绿绿的肥厚宽大的叶片，在寒冷萧瑟的冬季里是这样的张扬着，显示着绿色的生命力。关于菠菜的营养和做法我就不絮叨了，我说的是我家的关于做“凉拌菠菜”的事情。每个人都有其过人之处，或者说是特长。同理，每个家庭或厨师对于做菜也自然会有其擅长的手段。不过我家或者说是我吧，就比较平庸了，对于做饭是马马虎虎，寥寥草草，其实，下厨房我原本就是奔着“糊口”去的。
</span>
</div>
</div><div class="clear"></div>
<!--公司简介-->
<!--产品展示-->
<div class="index_pro">
<div class="clear"></div>
<p class="proname"><label>产品中心</label><a href="#" >更多</a></p>
<div class="clear"></div>
<div class="pro-ul" >
<ul class="index_jul" >
<li> <a href="#" ><img src="images/p1.jpg" width="246" height="185" /><span>中国味道</span></a></li>
<li> <a href="#" ><img src="images/p2.jpg" width="246" height="185" /><span>美味搭配</span></a></li>
<li> <a href="#" ><img src="images/p3.jpg" width="246" height="185" /><span>记忆忧心</span></a></li>
<li> <a href="#" ><img src="images/p5.jpg" width="246" height="185" /><span>家乡味道</span></a></li>
<li> <a href="#" ><img src="images/p2.jpg" width="246" height="185" /><span>中国味道</span></a></li>
<li> <a href="#" ><img src="images/p5.jpg" width="246" height="185" /><span>美味搭配</span></a></li>
<li> <a href="#" ><img src="images/p4.jpg" width="246" height="185" /><span>记忆忧心</span></a></li>
<li> <a href="#" ><img src="images/p1.jpg" width="246" height="185" /><span>家乡味道</span></a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--产品展示enf-->
<!--技术支持-->
<div class="indexcafra">
<div class="main">
<div class="newsleft">
<div class="nameff"><p>新闻中心</p><a href="#" >更多</a></div>
<ul class="news_ful">
<li><a href="#" > > 粉红女人节 到家美食会福袋健美焕新生</a></li>
<li><a href="#" > > 饮食养生:必知14种最清肠排毒美食</a></li>
<li><a href="#" > > 来太子湾赏花,还有美食相迎</a></li>
<li><a href="#" > > 粉红女人节 到家美食会福袋健美焕新生</a></li>
<li><a href="#" > > 莫让美食伤了肠胃</a></li>
</ul>
</div>
<div class="newsright">
<div class="nameff"><p>探讨美食</p><a href="#" >更多</a></div>
<ul class="news_ful" >
<li><a href="#" > >“舌尖上的观湖”展示原味客家美食</a></li>
<li><a href="#" > > 自带家乡美食返校 快来尝尝乡愁味道</a></li>
<li><a href="#" > > 全球最惊悚的“美食” 重口味也要慎重围观</a></li>
<li><a href="#" > > 养肝正当时 美食补起来</a></li>
<li><a href="#" > > 这些高颜值美食,为春日抹上一缕缤纷色彩</a></li>
</ul>
</div>
</div>
</div>
<!--案例-->
<div class="indexnews">
<div class="clear"></div>
<p class="proname"><label>美食展示</label><a href="#" >更多</a></p>
<div class="main">
<ul class="index_jul" >
<li> <a href="#" ><img src="images/p1.jpg" width="246" height="185" /><span>中国味道</span></a></li>
<li> <a href="#" ><img src="images/p2.jpg" width="246" height="185" /><span>美味搭配</span></a></li>
<li> <a href="#" ><img src="images/p4.jpg" width="246" height="185" /><span>记忆忧心</span></a></li>
<li> <a href="#" ><img src="images/p5.jpg" width="246" height="185" /><span>家乡味道</span></a></li>
</ul>
</div>
</div>
<div class="links">
<div class="fmain">
<div class="linkleft"> <span>友情链接：</span>
<a href="#" target="_blank">百度</a>
</div>
</div>
<div class="c"></div>
</div>
<div class="footclear"></div>
<div class="foot">
<div class="foot-con">
<div class="foo-cont">
<p class="name">联系我们</p>
<div class="cont-fcon f1">电话： 88-0000-00000</div>
<div class="cont-fcon f2">传真： 88-0000-00000</div>
<div class="cont-fcon f3">邮箱：这里是您公司的邮箱地址</div>
<div class="cont-fcon f4">地址：这里是您的公司地址</div>
</div>
<div class="foo-right">
<div class="footlink">
<div class="head_rtel1"><span> 88-0000-00000</span><b>订购热线 节假日不休息</b></div>
<div class="site">网站地图</div>
</div>
<div class="foot-left">电话： 88-0000-00000 传真： 88-0000-00000 地址：这里是您的公司地址<br />
版权所有：某某某技术有限公司 ICP备案编号：<a href="#" target="_blank">ICP备********号</a>
</div>
</div>
</div>
</div>
<div class="footnav">
<div class="foofra">
<a href="#" >网站首页</a>|
<a href="#" >公司简介</a>|
<a href="#" >产品中心</a>|
<a href="#" >加盟中心</a>|
<a href="#" >店面展示</a>|
<a href="#" >基地展示</a>|
<a href="#" >人参养生</a>|
<a href="#" >人参常识</a>|
<a href="#" >资质荣誉</a>|
<a href="#" >联系我们</a>
</div>
</div>
<div class="side_nav">
<ul>
<li class="back_top">
<a href="#" >
<span>返回顶部</span>
</a>
</li>
</ul>
<div class="c"></div>
</div>
</body>
</html>
评论